<template>
	<view class="card">
		<swiper class="card-lunbo" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			circular="true">
			<swiper-item v-for="banner in cardInfo.category.bannerUrlList" :key="banner">
				<image :src="banner" mode=""></image>
			</swiper-item>
		</swiper>
		<view>{{cardInfo.category.name}}</view>
		<view>{{cardInfo.category.frontDesc}}</view>
		<view class="card-content">
			<view class="content-item" v-for="item in cardInfo.itemList" :key="item.id">
				<image :src="item.primaryPicUrl" mode=""></image>
				<text>{{item.name}}</text>
				<text>商品价格: {{item.counterPrice||0}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default{
		name:'Card',
		data(){
			return{
				msg:'aaa'
			}
		},
		props:{
			navId:{
				type:Number,
				required:true,
				default:0
			}
		},
		computed:{
			...mapState('home',['homeCardList']),
			cardInfo(){
				return this.homeCardList.find(item=>item.category.parentId === this.navId) || {}
			}
		},
		mounted(){
			this.getHomeCardList()
		},
		methods:{
			...mapActions('home',['getHomeCardList'])
		}
	}
</script>

<style lang="stylus" scoped>
	.card
		text-align: center
		.card-lunbo
			image
				width:100%
				height:350upx
		.card-content
			display:flex
			flex-wrap: wrap
			.content-item
				display:flex
				flex-direction:column
				text-align: left
				width:50%
				image
					width:100%
					height:300upx
	
</style>